<template>
	<el-card class="topic" v-if="topic">
		<el-dialog v-model="jumpTopicState" center width="400px">
			<el-form :inline="true">
				<el-form-item class="mb-clear">
					<el-input v-model="jumpTopicValue" placeholder="请输入题号"></el-input>
				</el-form-item>
				<el-form-item class="mb-clear">
					<el-button type="primary" @click="jumpTopic">点击确定</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<template #header>
			<div class="flex-a">
				<el-button-group>
					<el-button size="mini" @click="jumpTopicState = true">跳题</el-button>
					<el-button size="mini" @click="prevTopic">上一题</el-button>
					<el-button size="mini" @click="nextTopic">下一题</el-button>
				</el-button-group>
				<div>
					<span>ID：{{ topic._id.content }} - </span>
					<el-tag size="small" :type="['success','warning','primary'][topic.questionType.content]">{{ ['判断','单选','多选'][topic.questionType.content] }}</el-tag>
				</div>
<!--				<el-link @click.prevent="modify">修改</el-link>-->
			</div>
		</template>
		<h2 class="title">{{ topic.question.content }}</h2>
		<div class="answer">
			<el-radio
				v-for="item in topic.options.key"
				:key="item.title"
				style="width: 100%; padding: 10px 0;"
				:label="1"
				v-show="item.content"
			>{{ item.content }}</el-radio>
		</div>

		<el-alert
			:title="`正确答案: ${topic.correct.content}`"
			type="success"
			:closable="false">
		</el-alert>
	</el-card>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

export default defineComponent({
	name: 'laTopic',
	props: ['topic'],
	setup (props, context) {
		const route = useRoute()
		const router = useRouter()
		const jumpTopicState = ref(false)
		const jumpTopicValue = ref()

		const prevTopic = () => { context.emit('prev') }
		const nextTopic = () => { context.emit('next') }
		const jumpTopic = () => { context.emit('jump', jumpTopicValue.value) }
		const modify = () => {
			window.sessionStorage.setItem('curItemId', route.name)
			window.sessionStorage.setItem('modify_topic', JSON.stringify(props.topic))
			router.push('/modify')
		}

		return {
			jumpTopicState,
			jumpTopicValue,
			jumpTopic,
			prevTopic,
			nextTopic,
			modify
		}
	}
})
</script>

<style scoped lang="scss">
	.topic {
		.title {
			font-size: 16px;
			font-weight: 500;
		}
		.answer {
			padding: 20px 0;
		}
		.action {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
</style>
